<template>
  <div>
    <div class="list-top">
      <div class="list-top-right">
        活动编号
        <el-input
          v-model="searchData.number"
          placeholder="请输入活动编号"
          size="small"
          class="search-input"
        ></el-input>活动名称
        <el-input v-model="searchData.name" placeholder="请输入活动名称" size="small" class="search-input"></el-input>活动状态
        <el-select v-model="searchData.activeStatus" size="small" class="search-input">
          <el-option
            v-for="(item,index) in activeStatusOption"
            :value="item.value"
            :key="index"
            :label="item.label"
          ></el-option>
        </el-select>审核状态
        <el-select v-model="searchData.checkStatus" size="small" class="search-input">
          <el-option
            v-for="(item,index) in checkStatusOption"
            :value="item.value"
            :key="index"
            :label="item.label"
          ></el-option>
        </el-select>
      </div>
      <div class="list-top-left">
        <el-button type="primary" size="small" @click="search">搜索</el-button>
        <el-button
          type="primary"
          size="small"
          @click="routerPush(0, '')"
          v-if="setRole('新增') && !parseInt(isShop)"
        >新增活动</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="activityCode" label="活动编号" width="130"></el-table-column>
      <el-table-column prop="activityName" label="活动名称" width="200"></el-table-column>
      <el-table-column prop="activityTime" label="活动时间" width="310"></el-table-column>
      <el-table-column prop="activityState" label="活动状态" :formatter="activityState"></el-table-column>
      <el-table-column prop="ticketType" label="优惠券类型" :formatter="storeTicketType"></el-table-column>
      <el-table-column prop="ticketDiscount" label="优惠详情"></el-table-column>
      <el-table-column prop="activityAuditState" label="审核状态" :formatter="activityAuditState"></el-table-column>
      <el-table-column prop="operate" label="操作" width="280">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="routerPush(scope.row.activityAuditState, scope.row.id)"
          >查看</el-button>
          <el-button
            type="text"
            size="small"
            @click="routerPush(10, scope.row.id)"
            v-if="(scope.row.activityAuditState === 0||scope.row.activityAuditState === 2 || scope.row.activityAuditState === 3) && 
            setRole('修改') && scope.row.activityState !== 1 && scope.row.activityState !== 2&& !parseInt(isShop)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteActivity(scope.row)"
            v-if="scope.row.activityAuditState === 0 && setRole('删除') && scope.row.activityState !== 3 && !parseInt(isShop)"
          >删除</el-button>
          <el-button
            type="text"
            size="small"
            @click="offlineActivity(scope.row)"
            v-if="(scope.row.activityAuditState === 2 && scope.row.activityState === 1) && setRole('下线') && scope.row.activityState !== 2 && !parseInt(isShop)"
          >下线</el-button>
          <el-button
            type="text"
            size="small"
            @click="submitAudit(scope.row)"
            v-if="(scope.row.activityAuditState === 0  || scope.row.activityAuditState === 3 ) && setRole('提交审核') && !parseInt(isShop) && scope.row.activityState !== 2"
          >提交审核</el-button>

          <el-button
            type="text"
            size="small"
            @click="downLoadErweima(scope.row)"
            v-if="scope.row.activityAuditState === 2 && setRole('下载二维码') && scope.row.activityState !== 2 "
          >下载二维码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageblock">
      <el-button size="small" type="primary" @click="toPage">确定</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>
    <div id="qrcode" v-show="false"></div>
  </div>
</template>
<script>
import util from "@/util";
import s from "@/util/state";
import QRCode from "qrcodejs2";
import {
  findShopActivity,
  downLoadErweima,
  updateActivityStatus, // 提交审核
  deleteActivity, //删除活动
  updateShopActivity // 下线活动
} from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId", "isShop"]),
  components: {
    QRCode: QRCode
  },
  data() {
    return {
      activityAuditState: s.activityAuditState,
      activityState: s.activityState,
      storeTicketType: s.ticketType,
      downLoadUrl: "",
      searchData: {
        number: "",
        name: "",
        activeStatus: "",
        checkStatus: ""
      },
      pageSize: 10,
      currentPage: 1,
      totalNum: 0,
      tableData: [],
      activeStatusOption: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "未开始",
          value: 0
        },
        {
          label: "进行中",
          value: 1
        },
        {
          label: "已结束",
          value: 2
        },
        {
          label: "已下线",
          value: 3
        }
      ],
      checkStatusOption: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "未提交",
          value: 0
        },
        {
          label: "未审核",
          value: 1
        },
        {
          label: "审核通过",
          value: 2
        },
        {
          label: "审核驳回",
          value: 3
        }
      ]
    };
  },
  mounted() {
    this.getActiveList(this.searchData, this.currentPage, this.pageSize);
  },
  methods: {
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    qrcode(text) {
      let qrcode = new QRCode("qrcode", {
        width: 200,
        height: 200, // 高度  [图片上传失败...(image-9ad77b-1525851843730)]
        text: text // 二维码内容
      });
    },
    search() {
      this.getActiveList(this.searchData);
    },
    routerPush(status, id, power) {

      if (this.setRole('审核')) {
        power = 1
      }

      power = power || 0
      util.routerTo("/marketing-center/shop-active/store-active-add", {
        status: status,
        id: id,
        power: power
      });
    },
    getActiveList(searchData, pageNum, pageSize) {
      let data = {
        shopId: this.merchantId,
        activityCode: searchData.number,
        activityName: searchData.name,
        activityState: searchData.activeStatus,
        activityAuditState: searchData.checkStatus,
        pageNum: pageNum,
        pageSize: pageSize,
        activityType:"2"
      };
      findShopActivity(data).then(res => {
        this.tableData = res.data.list;
        this.totalNum = res.data.pageTotal;
      });
    },
    toPage(val) {
      this.currentPage = val;
      this.getActiveList(this.searchData, this.currentPage, this.pageSize);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getActiveList(this.searchData, this.currentPage, this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getActiveList(this.searchData, this.currentPage, this.pageSize);
    },
    submitAudit(row) {
      let data = {
        ids: [row.id],
        activityAuditState: 1
      };
      this.$confirm("确认提交审核当前活动吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        updateActivityStatus(data).then(res => {
          this.getActiveList(this.searchData, this.currentPage, this.pageSize);
        });
      });
    },
    deleteActivity(row) {
      this.$confirm("确认删除当前活动吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        deleteActivity({ id: row.id }).then(res => {
          this.getActiveList(this.searchData, this.currentPage, this.pageSize);

          this.$message.success("删除成功");
        });
      });
    },
    offlineActivity(row) {
      let data = {
        isOffline: 1,
        id: row.id
      };
      this.$confirm("确认下线当前活动吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        updateShopActivity(data).then(res => {
          this.getActiveList(this.searchData, this.currentPage, this.pageSize);
          this.$message.success("下线活动成功");
        });
      });
    },
    downLoadErweima(row) {
      this.qrcode(row.url);

      setTimeout(() => {
        let url = document.querySelector("#qrcode img").src;
        let a = document.createElement("a");
        let event = new MouseEvent("click");
        a.href = url;
        a.download = row.activityName + row.activityCode+'.png';
        document.querySelector("#qrcode").innerHTML = "";

        if (window.navigator.msSaveBlob) {
          this.$message.error("请使用谷歌浏览器下载")
        } else {
          console.log(a,'a')
          a.dispatchEvent(event);
        }
      }, 0);
    }
  }
};
</script>
<style  lang="less" scoped>
.list-top {
  padding: 20px 10px;
  display: flex;
  justify-content: space-between;
  .list-top-right {
    width: 80%;
  }
}
.search-input {
  width: 12%;
  margin: 0 5px 0;
}
.pageblock {
  box-sizing: border-box;
  padding-right: 10px;
  .el-button {
    float: right;
  }
}
</style>
